<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           #box {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- <button id="btn" class="btn">我是按钮</button>
    <ul class="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>    
        <li>列表项4</li>
    </ul>
    <div id="box">
        <h1>我是标题</h1>
    </div>
    <a id="aaa" href="https://www.baidu.com"></a>
    <div id="test" style="width: 100px; height: 100px; background-color: red;"></div> -->
    <!-- <button id="btn">我是按钮</button>
    <div id="box"></div>
    <a id="a" href="">打开百度</a>
    <div style="width:200px;height: 200px; background-color: red;" id=box1></div>
    <div id="insert"><p>你是我的小苹果</p></div>
    <ul id="ul">
        <li id="first">列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li id="last">列表项4</li>
    </ul> -->
    <!-- <ul id="ul">
        <li id="first">列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ul> -->
    <div id="box">
        <ul id="ul">
            <li><a href="https://www.baidu.com">我是超链接1</a></li>
            <li id="two"><a href="https://www.baidu.com">我是超链接2</a></li>
            <li><a href="https://www.baidu.com">我是超链接3</a></li>
            <li><a href="https://www.baidu.com">我是超链接4</a></li>
        </ul>
    </div>
   
</body>
<script>
    // var btn=document.getElementById("btn")
    // console.log(btn)
    // var btn=document.getElementsByTagName("button")
    // console.log(btn)
    // var btn1=document.getElementsByClassName("button")
    // console.log(btn)
    //需求描述：创建一个按钮，通过CSS选择器选择该按钮
    // var btn = document.querySelector(".btn");
    // console.log(btn);
    // var li=document.querySelectorAll(".list li")
    // console.log(li)
    //需求描述：创建一个按钮，然后获取按钮的文本内容
    // var btn=document.getElementById("btn")
    // console.log(btn.innerText)
    //需求描述：创建一个div，然后在div中插入一个h1标题，获取div中的html代码
    // var box=document.getElementById("box")
    // console.log(box.innerHTML)
    //需求描述：创建一个超链接，默认为空，
    //设置href属性为https://www.baidu.com ，使用JavaScript代码读取href属性
    //使用JavaScript代码读取href属性
    // var aaa=document.getElementById("aaa")
    // console.log(aaa.href)
    // console.log(aaa.getAttribute("href"))
    //需求描述：创建一个正方形div，默认颜色为红色，使用JavaScript代码获取div的宽度
    //var box=document.getElementById("test");
    //console.log(box.style.width);

    /*
    在其它浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用，但是需要两个参数：

    第一个参数：要获取样式的元素
    第二个参数：可以传递一个伪元素，一般都传null
    根据id值获取style样式
    该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过 对象.样式名 来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值，
    */
    //console.log(getComputedStyle(box,null)["height"])
    //需求描述：创建一个按钮，然后改变按钮的文本内容
    // var btn=document.getElementById("btn")
    // btn.innerText="我是JavaScript的按钮"
    // console.log(btn)
    //需求描述：创建一个div，然后在div中插入一个h1标题
    // var box=document.getElementById("box")
    // box.innerHTML="<h1>我是一个大标题</h1>"
    // console.log(box)
    //需求描述：创建一个超链接，默认为空，使用JavaScript代码设置href属性为https://www.baidu.com
    // var a=document.getElementById("a")
    // a.href="https://www.baidu.com"
    // console.log(a)
    //需求描述：创建一个正方形div，默认颜色为红色，使用JavaScript代码改变为绿色
    // var box1=document.getElementById("box1")
    // box1.style.backgroundColor="green"
    // console.log(box1)
    //修改节点的内容除了常用的innerHTML和innerText之外，
    //还有insertAdjacentHTML和insertAdjacentText方法，
    //可以在指定的地方插入内容。insertAdjacentText方法与
    //insertAdjacentHTML方法类似，只不过是插入纯文本，参数相同
    //这两个方法必须等文档加载好后才能执行，否则会出错。
    //insertAdjacentText只能插入普通文本，insertAdjacentHTML插入html代码。
    //使用insertAdjacentHTML方法插入script脚本文件时，必须在script元素上定义defer属性。
    //使用insertAdjacentHTML方法插入html代码后，页面上的元素集合将发生变化。
    //insertAdjacentHTML方法不适用于单个的空的元素标签(如img，input等)。
    // var div=document.getElementById("insert")
    // div.insertAdjacentHTML("beforeBegin","aaaaaaaa")
    //修改html元素
    //案例演示1：创建一个ul列表，然后在该列表中追加4个li标签
    //方法一
    // var ul=document.createElement("ul")
    // var li1=document.createElement("li")
    // var text1=document.createTextNode("列表项1")
    // li1.append(text1)
    // ul.append(li1)
    // var li2=document.createElement("li")
    // var text2=document.createTextNode("列表项2")
    // li2.append(text2)
    // ul.append(li2)
    // document.getElementsByTagName("body")[0].append(ul)
    //方法二
    // var ul=document.createElement("ul")
    // var li1=document.createElement("li")
    // li1.innerText="列表项1"
    // ul.append(li1)
    // var li2=document.createElement("li")
    // li2.innerText="列表项2"
    // ul.append(li2)
    // document.getElementsByTagName("body")[0].append(ul)
    //方法三
    // var ul=document.createElement("ul")
    // var li1="<li>列表项1</li>"
    // var li2="<li>列表项2</li>"
    // var li3="<li>列表项3</li>"
    // ul.innerHTML=li1+li2+li3
    // document.getElementsByTagName("body")[0].append(ul)
    //案例演示2：创建一个ul列表，里边有四个li子元素，删除第一个li，替换最后一个li
    
    // var ul=document.getElementById("ul")
    // //删除第一个
    // var first=document.getElementById("first")
    // ul.removeChild(first)
    // //替换最后一个
    // var last=document.getElementById("last")
    // var replaceE=document.createElement("li")
    // replaceE.innerText="新替换的"
    // ul.replaceChild(replaceE,last)
    //案例演示3：创建一个ul列表，里边有四个li子元素，在第一个li前边插入一个id为zero的li
    // var ul=document.getElementById("ul")
    // var li=document.createElement("li")
    // li.innerText="新添加的"
    // var first=document.getElementById("first")
    // ul.insertBefore(li,first)
    //查找 HTML 父子
    var box = document.getElementById("box");
    var ul = document.getElementById("ul");
    var two = document.getElementById("two");
    // console.log(ul.parentNode);
    // console.log(ul.parentElement);
    // console.log("===============");

    // console.log(box.childNodes);
    // console.log(box.children);
    // console.log("===============");

    // console.log(ul.firstChild);
    // console.log(ul.firstElementChild);
    // console.log(ul.lastChild);
    // console.log(ul.lastElementChild);
    // console.log("===============");

        console.log(two.previousSibling);
        console.log(two.previousElementSibling);
        console.log(two.nextSibling);
        console.log(two.nextElementSibling);




</script>
</html>